// news-system-modern/src/store/features/settingsSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from '../index';

// 主题颜色类型
export type ThemeColor = 'default' | 'blue' | 'green' | 'purple' | 'red' | 'orange';

// 布局类型
export type LayoutType = 'side' | 'top' | 'mix';

// 主题模式
export type ThemeMode = 'light' | 'dark';

// 国际化语言类型
export type Locale = 'zh_CN' | 'en_US';

// 系统设置状态接口
export interface SettingsState {
  // 主题设置
  theme: ThemeMode;          // 主题模式
  colorPrimary: string;      // 主题色
  colorWeak: boolean;        // 色弱模式
  
  // 布局设置
  layout: LayoutType;         // 布局类型
  fixedHeader: boolean;       // 固定头部
  fixedSidebar: boolean;      // 固定侧边栏
  contentWidth: 'fluid' | 'fixed'; // 内容区域宽度
  splitMenus: boolean;        // 自动分割菜单
  navTheme: ThemeMode;         // 导航栏主题
  
  // 其他显示设置
  showBreadcrumb: boolean;    // 显示面包屑
  showTagsView: boolean;      // 显示标签栏
  showFooter: boolean;        // 显示页脚
  showLogo: boolean;          // 显示Logo
  
  // 国际化设置
  locale: Locale;             // 当前语言
}

// 初始状态
const initialState: SettingsState = {
  theme: 'light',
  colorPrimary: '#1890ff',
  colorWeak: false,
  layout: 'side',
  fixedHeader: true,
  fixedSidebar: true,
  contentWidth: 'fluid',
  splitMenus: false,
  navTheme: 'dark',
  showBreadcrumb: true,
  showTagsView: true,
  showFooter: true,
  showLogo: true,
  locale: 'zh_CN'
};

// 创建Slice
export const settingsSlice = createSlice({
  name: 'settings',
  initialState,
  reducers: {
    // 更新主题色
    changePrimaryColor: (state, action: PayloadAction<ThemeColor>) => {
      state.colorPrimary = action.payload;
    },
    
    // 切换主题模式
    changeThemeMode: (state, action: PayloadAction<ThemeMode>) => {
      state.theme = action.payload;
    },
    
    // 切换色弱模式
    toggleColorWeak: (state) => {
      state.colorWeak = !state.colorWeak;
    },
    
    // 更新布局类型
    changeLayoutType: (state, action: PayloadAction<LayoutType>) => {
      state.layout = action.payload;
    },
    
    // 切换固定头部
    toggleFixedHeader: (state) => {
      state.fixedHeader = !state.fixedHeader;
    },
    
    // 切换固定侧边栏
    toggleFixedSidebar: (state) => {
      state.fixedSidebar = !state.fixedSidebar;
    },
    
    // 更新内容区域宽度
    changeContentWidth: (state, action: PayloadAction<'fluid' | 'fixed'>) => {
      state.contentWidth = action.payload;
    },
    
    // 切换自动分割菜单
    toggleSplitMenus: (state) => {
      state.splitMenus = !state.splitMenus;
    },
    
    // 切换导航栏主题
    toggleNavTheme: (state) => {
      state.navTheme = state.navTheme === 'light' ? 'dark' : 'light';
    },
    
    // 切换显示面包屑
    toggleBreadcrumb: (state) => {
      state.showBreadcrumb = !state.showBreadcrumb;
    },
    
    // 切换显示标签栏
    toggleTagsView: (state) => {
      state.showTagsView = !state.showTagsView;
    },
    
    // 切换显示页脚
    toggleFooter: (state) => {
      state.showFooter = !state.showFooter;
    },
    
    // 切换显示Logo
    toggleLogo: (state) => {
      state.showLogo = !state.showLogo;
    },
    
    // 更改语言
    changeLocale: (state, action: PayloadAction<Locale>) => {
      state.locale = action.payload;
    },
    
    // 重置所有设置为默认
    resetSettings: () => initialState,
  },
});

// 导出Actions
export const {
  changePrimaryColor,
  changeThemeMode,
  toggleColorWeak,
  changeLayoutType,
  toggleFixedHeader,
  toggleFixedSidebar,
  changeContentWidth,
  toggleSplitMenus,
  toggleNavTheme,
  toggleBreadcrumb,
  toggleTagsView,
  toggleFooter,
  toggleLogo,
  changeLocale,
  resetSettings,
} = settingsSlice.actions;

// 从状态中选择设置
export const selectSettings = (state: RootState) => state.settings;
export const selectTheme = (state: RootState) => state.settings.theme;
export const selectColorPrimary = (state: RootState) => state.settings.colorPrimary;
export const selectLayout = (state: RootState) => state.settings.layout;
export const selectFixedHeader = (state: RootState) => state.settings.fixedHeader;
export const selectContentWidth = (state: RootState) => state.settings.contentWidth;
export const selectNavTheme = (state: RootState) => state.settings.navTheme;
export const selectShowBreadcrumb = (state: RootState) => state.settings.showBreadcrumb;

export default settingsSlice.reducer; 